{%- include utils/get-assets-baseurl.html -%}
{%- assign _assets_baseurl = __return -%}

<div id="search" class="search-page">
  <i class="search-close fas fa-chevron-down"></i>
  <p class="search-title text-center"></p>

  <div class="input">
    <input
      id="search-input"
      type="text"
      class="search-field"
      placeholder="Just search ..."
      style="background-color: transparent"
    />
  </div>
  <div id="search-results" class="search-results"></div>
</div>

<script>
  // simple-jekyll-search.js
  SimpleJekyllSearch({
    searchInput: document.getElementById("search-input"),
    resultsContainer: document.getElementById("search-results"),
    json: "/search.json",
    searchResultTemplate:
      '<li class="result-item item"><a href="{url}" title="{desc}"><div class="result-item-title">{title}</div><div class="result-item-subtitle">{subtitle}</div></a></li>',
    noResultsText:
      '<li class="result-item item"><div class="result-item-title">No Results</div></li>',
    limit: 20,
    fuzzy: false,
  });

  function autoFocus() {
    setTimeout(function () {
      document.querySelector(".search-page input").focus();
    }, 400);
  }

  // open search page
  $("#search-btn").click(function () {
    $(".search-page").toggleClass("open");
    autoFocus();
  });

  // open search page (mobile)
  $("#mobile-search-btn").click(function () {
    $(".search-page").toggleClass("open");
    autoFocus();
  });

  // close search page
  $(".search-close").click(function () {
    $(".search-page").toggleClass("open");
  });
</script>
